<template>
    <ul class="playlist-cell">
        <li class="playlist-cell-item" v-for="(item, index) in data" :key="item.id" :data-index="index" 
        >
            <div class="cell-index">{{index+1}}</div>
            <div class="cell-content">
                <p class="song">{{item.name}}</p>
                <span class="singer">{{item.ar.map(item => item.name).join()}}</span>
            </div>
            <div class="cell-play" v-click-outside="active = false" :dark="active" @click="triggerPlay(item)" >
                <v-icon >
                    mdi-play-circle-outline
                </v-icon>
            </div>
        </li>
    </ul>
</template>

<script>
import { musicMixin } from '@/utils/mixin'

export default {
    mixins: [musicMixin],
    props: {
        data:{
            type: Array
        },
        order: {
            type: Boolean,
            default: false
        }
    },
    data(){
        return {
            active: false
        }
    },
    methods: {
        triggerPlay(data){
            this.active = true;
            this.setPlayInfo(data.id).then(res=> {
                let index = this.data.findIndex((item)=> {
                    return item.id === data.id
                });

                this.setPlayIndex(index);
                if(this.playList.length == 0){
                    this.setPlayList(this.data);
                    
                }

                this.playMusic();
            });
            
        }
    } 
}
</script>

<style lang="scss" scoped>
    @import '@/assets/styles/global';
    .playlist-cell {
        .playlist-cell-item {
            display: flex;
            height: px2rem(54);
            border-bottom: 1px solid #f1f1f1;
            padding-bottom: px2rem(6);
            margin: 0 px2rem(6) px2rem(6);
            .cell-index {
                flex-shrink: 0;
                width: px2rem(34);
                line-height: px2rem(40);
                text-align: center;

            }

            .cell-content {
                flex: 1;
                width: 0;
                padding: px2rem(4) px2rem(10);
                text-align: left;
                @include ellipsis;
                .song {
                    font-size: px2rem(14);
                    color: #333
                }   
                .singer {
                    font-size: px2rem(12);
                    color: #666;
                }
            }

            .cell-play {
                flex-shrink: 0;
                width: px2rem(60);
                @include center;
            }
        }
    }
</style>